$test: #bada55;
$red: #cd110a;
$purple: #883c95;
$gray: #6d6d6d;
$white: #ffffff;
$black: #020202;
$pale-blue: #8ebcdd;
$blue-gray: #adc5c9;
$pale-red: #dca6b4;
$gold: #d6c688;
$orange: #f69421;

div,
div:before,
div:after {
  display: block;
  content: "";
  position: absolute;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0 auto;
  background-color: $white;
  background-repeat: no-repeat;
  background-position-x: 10vmin;
  background-position-y: 10vmin;
  background: radial-gradient(lighten($blue-gray, 10%) 50%, $pale-blue);
}

$box-w: -5vmin;
$box-h: -10vmin;

div.black-friday {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
}

div.black-friday:before {
  width: 65vmin;
  height: 65vmin;
  background: 
    
   
     //handle cover
    radial-gradient(
        ellipse at 50% 50%,
        lighten($red, 15%) 0.25vmin,
        $red 2vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 6vmin) calc(#{$box-h} + 15vmin) / 5.75vmin 5.75vmin
      no-repeat,
    //linear-gradient(25deg, $red 2vmin, transparent 1vmin)
    //calc(#{$box-w} + 8vmin) calc(#{$box-h} + 14vmin) / 6vmin 3vmin no-repeat,
    linear-gradient(
        15deg,
        lighten($red, 15%) 1.5vmin,
        $red 4vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 8.5vmin) calc(#{$box-h} + 16vmin) / 9vmin 3.75vmin
      no-repeat,
    radial-gradient(
        ellipse at 50% 50%,
        lighten($red, 15%) 0.25vmin,
        $red 1vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 15.5vmin) calc(#{$box-h} + 17.35vmin) / 3vmin 3vmin
      no-repeat,
    //linear-gradient(205deg, $red 2vmin, transparent 1vmin)
    //calc(#{$box-w} + 5vmin) calc(#{$box-h} + 18vmin) / 6vmin 3vmin no-repeat,
    //basket row bar 1
    linear-gradient(
        183.5deg,
        transparent 5vmin,
        darken($white, 10%) 5.25vmin,
        lighten($black, 30%) 5.5vmin,
        $gray 5.75vmin,
        lighten($gray, 20%) 6vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 14.5vmin) calc(#{$box-h} + 22.75vmin) / 53vmin 12vmin
      no-repeat,
    //basket row bar 2
    linear-gradient(
        179.5deg,
        transparent 5vmin,
        darken($white, 10%) 5.25vmin,
        lighten($black, 30%) 5.5vmin,
        $gray 5.75vmin,
        lighten($gray, 20%) 6vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 20vmin) calc(#{$box-h} + 30vmin) / 46.25vmin 12vmin
      no-repeat,
    //basket row bar 3
    linear-gradient(
        174.5deg,
        transparent 5vmin,
        darken($white, 10%) 5.25vmin,
        lighten($black, 30%) 5.5vmin,
        $gray 5.75vmin,
        lighten($gray, 20%) 6vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 24vmin) calc(#{$box-h} + 40vmin) / 41.5vmin 12vmin
      no-repeat,
    //basket bottom left curve
    radial-gradient(
        ellipse at 105% -50%,
        transparent 3vmin,
        darken($white, 10%) 3.25vmin,
        darken($white, 10%) 3.25vmin,
        lighten($black, 30%) 3.5vmin,
        $gray 3.5vmin,
        lighten($gray, 20%) 3.75vmin,
        transparent 3.75vmin
      )
      calc(#{$box-w} + 22.25vmin) calc(#{$box-h} + 48.5vmin) / 6vmin 8vmin
      no-repeat,
    //basket bottom right curve
    radial-gradient(
        ellipse at 0% -50%,
        transparent 3vmin,
        darken($white, 10%) 3.25vmin,
        darken($white, 10%) 3.25vmin,
        lighten($black, 30%) 3.5vmin,
        $gray 3.5vmin,
        lighten($gray, 20%) 3.75vmin,
        transparent 3.75vmin
      )
      calc(#{$box-w} + 62vmin) calc(#{$box-h} + 44vmin) / 6vmin 8vmin no-repeat,
    //basket bottom
    linear-gradient(
        173deg,
        transparent 5vmin,
        darken($white, 10%) 5vmin,
        darken($white, 10%) 5.25vmin,
        lighten($black, 30%) 5.5vmin,
        $gray 5.75vmin,
        lighten($gray, 20%) 6.25vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 28vmin) calc(#{$box-h} + 45.5vmin) / 35vmin 12vmin
      no-repeat,
    //basket column bar 1
    linear-gradient(
        65deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 9vmin) calc(#{$box-h} + 20.5vmin) / 63vmin 29vmin
      no-repeat,
    //basket column bar 2
    linear-gradient(
        65deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 12.5vmin) calc(#{$box-h} + 20.5vmin) / 63vmin 30vmin
      no-repeat,
    //basket column bar 3
    linear-gradient(
        67deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 16.5vmin) calc(#{$box-h} + 25.5vmin) / 63vmin 25vmin
      no-repeat,
    //basket column bar 4
    linear-gradient(
        69deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 20vmin) calc(#{$box-h} + 25.5vmin) / 63vmin 25vmin
      no-repeat,
    //basket column bar 5
    linear-gradient(
        71deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 23.5vmin) calc(#{$box-h} + 26vmin) / 63vmin 24vmin
      no-repeat,
    //basket column bar 6
    linear-gradient(
        73deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 26.75vmin) calc(#{$box-h} + 26vmin) / 63vmin 24vmin
      no-repeat,
    //basket column bar 7
    linear-gradient(
        75deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 30vmin) calc(#{$box-h} + 26.5vmin) / 63vmin 23vmin
      no-repeat,
    //basket column bar 8
    linear-gradient(
        77deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 33.5vmin) calc(#{$box-h} + 26.5vmin) / 63vmin 22.5vmin
      no-repeat,
    //basket column bar 9
    linear-gradient(
        79deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 37vmin) calc(#{$box-h} + 26.75vmin) / 63vmin 22vmin
      no-repeat,
    //basket column bar 10
    linear-gradient(
        82deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 40.25vmin) calc(#{$box-h} + 27vmin) / 63vmin 21vmin
      no-repeat,
    //basket column bar 11
    linear-gradient(
        85deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 43.25vmin) calc(#{$box-h} + 27.5vmin) / 63vmin 20vmin
      no-repeat,
    //basket column bar 12
    linear-gradient(
        88deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 46.5vmin) calc(#{$box-h} + 27.5vmin) / 63vmin 19vmin
      no-repeat,
    //basket column bar 13
    linear-gradient(
        98deg,
        transparent 15vmin,
        lighten($gray, 20%) 15.25vmin,
        $gray 15.5vmin,
        lighten($black, 30%) 15.75vmin,
        darken($white, 10%) 16vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 51.25vmin) calc(#{$box-h} + 28vmin) / 63vmin 17vmin
      no-repeat,
    //basket handle left curve
    radial-gradient(
        ellipse at -30% 105%,
        transparent 4vmin,
        darken($white, 10%) 4.25vmin,
        darken($white, 10%) 4.5vmin,
        lighten($black, 30%) 4.75vmin,
        $gray 5vmin,
        lighten($gray, 20%) 5.25vmin,
        transparent 5.5vmin
      )
      calc(#{$box-w} + 10.35vmin) calc(#{$box-h} + 15vmin) / 8vmin 6vmin
      no-repeat,
    //basket handle right curve
    radial-gradient(
        ellipse at -30% 105%,
        transparent 4vmin,
        darken($white, 10%) 4.25vmin,
        darken($white, 10%) 4.5vmin,
        lighten($black, 30%) 4.75vmin,
        $gray 5vmin,
        lighten($gray, 20%) 5.25vmin,
        transparent 5.5vmin
      )
      calc(#{$box-w} + 13.35vmin) calc(#{$box-h} + 15vmin) / 8vmin 6vmin
      no-repeat,
    //lower curve
    radial-gradient(
        ellipse at 100% 25%,
        transparent 0.5vmin,
        lighten($gray, 20%) 0.5vmin,
        $gray 0.75vmin,
        lighten($black, 30%) 1.25vmin,
        darken($white, 10%) 1.5vmin,
        darken($white, 10%) 1.75vmin,
        transparent 2vmin
      )
      calc(#{$box-w} + 20vmin) calc(#{$box-h} + 60.25vmin) / 4vmin 6vmin
      no-repeat,
    //lower angle front
    linear-gradient(
        130deg,
        transparent 6vmin,
        darken($white, 10%) 6vmin,
        darken($white, 10%) 6.5vmin,
        lighten($black, 30%) 6.75vmin,
        $gray 6vmin,
        lighten($gray, 20%) 7.75vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 22.25vmin) calc(#{$box-h} + 51vmin) / 13vmin 13vmin
      no-repeat,
    //lower bar front
    linear-gradient(
        180deg,
        darken($white, 10%) 0.5vmin,
        lighten($black, 30%) 0.75vmin,
        $gray 1vmin,
        lighten($gray, 20%) 1.75vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 23.25vmin) calc(#{$box-h} + 61.75vmin) / 39vmin 1.75vmin
      no-repeat,
    radial-gradient(
        ellipse at 50% 50%,
        lighten($black, 20%) 0.25vmin,
        lighten($black, 10%) 0.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 61vmin) calc(#{$box-h} + 61.75vmin) / 2vmin 2vmin
      no-repeat,
    //lower bar back
    linear-gradient(
        180deg,
        darken($white, 10%) 0.5vmin,
        lighten($black, 30%) 0.75vmin,
        $gray 1vmin,
        lighten($gray, 20%) 1.75vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 24.25vmin) calc(#{$box-h} + 60.5vmin) / 37vmin 1.75vmin
      no-repeat,
    radial-gradient(
        ellipse at 50% 50%,
        lighten($black, 20%) 0.25vmin,
        lighten($black, 10%) 0.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 60.5vmin) calc(#{$box-h} + 60.5vmin) / 1.75vmin 1.75vmin
      no-repeat,
    //wheel left front metal cover
    linear-gradient(
        -110deg,
        lighten($red, 20%) 0.5vmin,
        $red 3.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 23vmin) calc(#{$box-h} + 63.5vmin) / 6vmin 1.5vmin
      no-repeat,
    linear-gradient(
        110deg,
        lighten($red, 20%) 0.5vmin,
        $red 3.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 28.5vmin) calc(#{$box-h} + 63.5vmin) / 6vmin 1.5vmin
      no-repeat,
    //wheel left front metal cover
    radial-gradient(
        ellipse at 50% 20%,
        lighten($red, 20%) 0.25vmin,
        $red 2vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 26.5vmin) calc(#{$box-h} + 65vmin) / 4vmin 4.5vmin
      no-repeat,
    //wheel right front metal cover
    linear-gradient(
        -110deg,
        lighten($red, 20%) 0.5vmin,
        $red 3.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 52.5vmin) calc(#{$box-h} + 63.5vmin) / 6vmin 1.5vmin
      no-repeat,
    linear-gradient(
        110deg,
        lighten($red, 20%) 0.5vmin,
        $red 3.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 58vmin) calc(#{$box-h} + 63.5vmin) / 6vmin 1.5vmin
      no-repeat,
    //wheel right front metal cover
    radial-gradient(
        ellipse at 50% 20%,
        lighten($red, 20%) 0.25vmin,
        $red 2vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 56.25vmin) calc(#{$box-h} + 65vmin) / 4vmin 4.5vmin
      no-repeat,
    // wheel front left
    radial-gradient(
        ellipse at 50% 50%,
        $black 1.25vmin,
        darken($white, 50%) 2.5vmin,
        $gray 2.75vmin,
        $gray 3vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 25.5vmin) calc(#{$box-h} + 66vmin) / 6vmin 6vmin
      no-repeat,
    // wheel front right
    radial-gradient(
        ellipse at 50% 50%,
        $black 1.25vmin,
        darken($white, 50%) 2.5vmin,
        $gray 2.75vmin,
        $gray 3vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 55.5vmin) calc(#{$box-h} + 66vmin) / 6vmin 6vmin
      no-repeat,
    //wheel left front metal cover
    radial-gradient(
        ellipse at 50% 20%,
        lighten($red, 20%) 0.25vmin,
        $red 1.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 30vmin) calc(#{$box-h} + 63.75vmin) / 3vmin 3.5vmin
      no-repeat,
    //wheel right front metal cover
    radial-gradient(
        ellipse at 50% 20%,
        lighten($red, 20%) 0.25vmin,
        $red 1.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 54.25vmin) calc(#{$box-h} + 63.75vmin) / 3vmin 3.5vmin
      no-repeat,
    // wheel back left
    radial-gradient(
        ellipse at 50% 50%,
        $black 1.25vmin,
        darken($white, 50%) 2.25vmin,
        $gray 2.5vmin,
        $gray 2.75vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 28vmin) calc(#{$box-h} + 63.5vmin) / 6vmin 6vmin
      no-repeat,
    // wheel front right
    radial-gradient(
        ellipse at 50% 50%,
        $black 1.25vmin,
        darken($white, 50%) 2.25vmin,
        $gray 2.5vmin,
        $gray 2.75vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 52.5vmin) calc(#{$box-h} + 63.5vmin) / 6vmin 6vmin
      no-repeat,
    //lower bar front
    linear-gradient(
        170deg,
        lighten($black, 20%) 1.5vmin,
        lighten($black, 30%) 1.75vmin,
        $gray 2vmin,
        lighten($gray, 20%) 2.75vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 30vmin) calc(#{$box-h} + 50.5vmin) / 8vmin 8vmin
      no-repeat,
    //red bag
    radial-gradient(
        ellipse at 50% 80%,
        transparent 5vmin,
        darken($red, 10%) 5vmin,
        darken($red, 10%) 5.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 46.5vmin) calc(#{$box-h} + 14.5vmin) / 12vmin 8vmin
      no-repeat,
    radial-gradient(
        ellipse at 50% 95%,
        transparent 4vmin,
        darken($red, 10%) 4vmin,
        darken($red, 10%) 4.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 48vmin) calc(#{$box-h} + 13.75vmin) / 12vmin 7vmin
      no-repeat,
    linear-gradient(
        0deg,
        $red 5vmin,
        lighten($red, 20%) 25vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 42vmin) calc(#{$box-h} + 22.5vmin) / 22vmin 24vmin
      no-repeat,
    linear-gradient(15deg, lighten($red, 20%) 1.25vmin, transparent 1vmin)
      calc(#{$box-w} + 42vmin) calc(#{$box-h} + 20vmin) / 3vmin 2vmin no-repeat,
    linear-gradient(-15deg, lighten($red, 20%) 1.25vmin, transparent 1vmin)
      calc(#{$box-w} + 61vmin) calc(#{$box-h} + 20vmin) / 3vmin 2vmin no-repeat,
    linear-gradient(0deg, $red 25vmin, transparent 1vmin)
      calc(#{$box-w} + 42vmin) calc(#{$box-h} + 20vmin) / 22vmin 25.5vmin
      no-repeat;
}

div.black-friday:after {
  width: 80vmin;
  height: 80vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -999;
  margin: 0 auto;
  transform: rotate(-8deg);
  position: relative;
  background: 
    //orange bag
    radial-gradient(
        ellipse at 50% 80%,
        transparent 5vmin,
        darken($orange, 10%) 5vmin,
        darken($orange, 10%) 5.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 38.5vmin) calc(#{$box-h} + 24.5vmin) / 12vmin 8vmin
      no-repeat,
    radial-gradient(
        ellipse at 50% 95%,
        transparent 4vmin,
        darken($orange, 10%) 4vmin,
        darken($orange, 10%) 4.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 40vmin) calc(#{$box-h} + 23.75vmin) / 12vmin 7vmin
      no-repeat,
    linear-gradient(
        0deg,
        $orange 5vmin,
        lighten($orange, 20%) 25vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 34vmin) calc(#{$box-h} + 32.5vmin) / 22vmin 24vmin
      no-repeat,
    linear-gradient(15deg, lighten($orange, 20%) 1.25vmin, transparent 1vmin)
      calc(#{$box-w} + 34vmin) calc(#{$box-h} + 30vmin) / 3vmin 2vmin no-repeat,
    linear-gradient(-15deg, lighten($orange, 20%) 1.25vmin, transparent 1vmin)
      calc(#{$box-w} + 53vmin) calc(#{$box-h} + 30vmin) / 3vmin 2vmin no-repeat,
    linear-gradient(0deg, $orange 25vmin, transparent 1vmin)
      calc(#{$box-w} + 34vmin) calc(#{$box-h} + 30vmin) / 22vmin 25.5vmin
      no-repeat,
    //black bag
    radial-gradient(
        ellipse at 50% 80%,
        transparent 5vmin,
        darken($black, 10%) 5vmin,
        darken($black, 10%) 5.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 46.5vmin) calc(#{$box-h} + 14.5vmin) / 12vmin 8vmin
      no-repeat,
    radial-gradient(
        ellipse at 50% 95%,
        transparent 4vmin,
        darken($black, 10%) 4vmin,
        darken($black, 10%) 4.5vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 48vmin) calc(#{$box-h} + 13.75vmin) / 12vmin 7vmin
      no-repeat,
    linear-gradient(
        0deg,
        $black 5vmin,
        lighten($black, 20%) 25vmin,
        transparent 1vmin
      )
      calc(#{$box-w} + 42vmin) calc(#{$box-h} + 22.5vmin) / 22vmin 24vmin
      no-repeat,
    linear-gradient(15deg, lighten($black, 20%) 1.25vmin, transparent 1vmin)
      calc(#{$box-w} + 42vmin) calc(#{$box-h} + 20vmin) / 3vmin 2vmin no-repeat,
    linear-gradient(-15deg, lighten($black, 20%) 1.25vmin, transparent 1vmin)
      calc(#{$box-w} + 61vmin) calc(#{$box-h} + 20vmin) / 3vmin 2vmin no-repeat,
    linear-gradient(0deg, $black 25vmin, transparent 1vmin)
      calc(#{$box-w} + 42vmin) calc(#{$box-h} + 20vmin) / 22vmin 25.5vmin
      no-repeat,
    radial-gradient(
        ellipse at 50% 50%,
        lighten($gold, 20%) 20vmin,
        transparent 30vmin
      ) -11vmin 5vmin / 80vmin 70vmin no-repeat,
    radial-gradient(
        ellipse at 50% 50%,
        lighten($pale-red, 10%) 25vmin,
        transparent 35vmin
      )
      9vmin -4vmin / 80vmin 70vmin no-repeat;
}
